<template>
    <div>
        <!--面包屑导航区-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <!--树形结构-->
            <el-tree :data="tableData"
                     :props="defaultProps"
                     @node-click="handleNodeClick"
                     :expand-on-click-node="false"
                     default-expand-all
                     :indent="indent"
                     ref="myTree"
            >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                  <el-button
                          type="text"
                          size="mini"
                          @click="() => edit(node)">
                    编辑
                  </el-button>
                  <el-button
                          type="text"
                          size="mini"
                          @click="() => append(node)">
                    新增子类
                  </el-button>
                  <el-button
                          type="text"
                          size="mini"
                          @click="() => remove(node)">
                    删除
                  </el-button>
                </span>
              </span>
            </el-tree>

            <!--添加类目对话框-->
            <el-dialog
                    title="添加类目"
                    :visible.sync="addDialogVisible"
                    width="50%"
                    @close="addDialogClosed"
                    :close-on-click-modal=false>
                <!--内容主体区-->
                <el-form :model="addForm" label-width="70px" ref="addFormRef">
                    <el-form-item label="类目名称" prop="name">
                        <el-input v-model="addForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="图片" prop="image">
                        <el-upload
                                class="avatar-uploader"
                                name="file"
                                action="http://upload.gker.com/upload/upload"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess">
                            <img v-if="imageUrl" :src="addForm.image" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <!--底部-->
                <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCategory">确 定</el-button>
  </span>
            </el-dialog>

            <!--编辑类目对话框-->
            <el-dialog
                    title="编辑类目"
                    :visible.sync="editDialogVisible"
                    width="50%"
                    @close="addDialogClosed"
                    :close-on-click-modal=false>
                <!--内容主体区-->
                <el-form :model="addForm" label-width="70px" ref="addFormRef">
                    <el-form-item label="类目名称" prop="name">
                        <el-input v-model="addForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="图片" prop="image">
                        <el-upload
                                class="avatar-uploader"
                                name="file"
                                action="http://upload.gker.com/upload/upload"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess">
                            <img v-if="imageUrl" :src="addForm.image" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <!--底部-->
                <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editCategory">确 定</el-button>
  </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Category",
        data() {
            return {

                defaultProps: {
                    children: 'children',
                    label: 'name'
                },

                addDialogVisible: false,
                editDialogVisible: false,
                addForm: {
                    name: '',
                    image: '',
                },
                tableData: [],
                currentId: '',
                indent: 50,
                //    文件上传
                imageUrl: ''
            }


        },
        methods: {

            handleNodeClick(data, node) {

            },
            /*文件上传*/
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.addForm.image = res.data.url

            },

            //获取类目列表
            async getCategoryList() {
                const res = await this.$http.get("/item/category/getCategoryTreeList")
                if (res.data.code !== "200") {
                    return this.$message.error('获取商品类目列表失败！错误码:' + res.data.code)
                }
                this.tableData = res.data.data
            },
            //监听对话框的关闭事件
            addDialogClosed() {
                // this.$refs.addFormRef.resetFields()
                this.addForm.name=''
                this.addForm.image=''
            },
            //新增类目
            append(node) {
                this.currentId = node.data.id;
                this.addDialogVisible = true
            },
            async addCategory() {
                let req = {
                    name: this.addForm.name,
                    image: this.addForm.image,
                    pid: this.currentId
                }
                const res = await this.$http.post("/item/category/addOrEditCategory", req)
                if (res.data.code !== "200") {
                    return this.$message.error('新增失败！错误码:' + res.data.code)
                }
                this.addDialogVisible = false
                await this.getCategoryList();
                this.$message.success('新增成功！')
            },
            //编辑类目
            async edit(node){
                this.currentId = node.data.id
                const res = await this.$http.get("/item/category/getCategoryById/"+this.currentId)
                this.addForm.image = res.data.data.image
                this.addForm.name = res.data.data.name
                this.editDialogVisible = true
            },
            async editCategory(){
                let req = {
                    name: this.addForm.name,
                    image: this.addForm.image,
                    id: this.currentId
                }
                const res = await this.$http.post("/item/category/addOrEditCategory", req)
                if (res.data.code !== "200") {
                    return this.$message.error('编辑失败！错误码:' + res.data.code)
                }
                this.editDialogVisible = false
                await this.getCategoryList();
                this.$message.success('编辑成功！')
            },
            //删除类目
            async remove(node) {
                this.$confirm('此操作将永久删除类目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    this.currentId = node.data.id;
                    const res = await this.$http.get("/item/category/delCategory/" + this.currentId)
                    if (res.data.code !== "200") {
                        return this.$message.error('删除失败！错误码:' + res.data.code)
                    }
                    await this.getCategoryList();
                    this.$message.success('删除成功！')
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },

        },
        created() {
            this.getCategoryList()
        }
    }
</script>

<style lang="less" scoped>
    ::v-deep .el-tree-node__content {
        height: 50px;
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 80px;
    }
    /*文件上传*/
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
